<template>
  <div class="userid">
        <p class="routitle">
            <router-link to="/userhome">个人博文</router-link> 
        </p>
        <div class="biaoti">  
            个人空间
        </div>
        <el-tabs :tab-position="top" style="height: 200px;" >
            <el-tab-pane>
                
                <span slot="label" class="fontClass">用户信息</span>
                <div class="message">
                    用户名
                </div>
                <div class="xijie">  
                    {{this.username}} 
                </div>

                <div class="message">
                    性别
                </div>
                <div class="xijie">  
                    {{this.usersex}} 
                </div>

                <div class="message">
                    头像
                </div>
                <div class="xijie">  
                    <img :src="userphoto" class="touxiang">
                </div>
            </el-tab-pane>
            
            <el-tab-pane style="padding:100px;">
                <span slot="label" class="fontClass">修改信息</span>
                <div class="search">
                    用户名
                    <input v-model="input1"  maxlength="20" minlength="4" placeholder="输入新用户名">
                </div>
                <div class="search">
                    性别
                    <input v-model="input2" placeholder="输入新性别">
                </div>
                <div class="search">
                    头像 
                    <input v-model="input3" placeholder="输入新头像">
                </div>
                <el-button type="primary" @click="update();goout();logout();" round class="searchbot" >上传</el-button>
            </el-tab-pane>
            
        </el-tabs>
        
        

  </div>
</template>

<script>
import qs from "qs";
import { getCurrentInstance } from "vue";
export default {
    data(){
        return {
            input1:'',
            input2:'',
            input3:'',
            username: 'batman',
            userkey: '123456',
            usersex: 'man', 
            userphoto: 'https://i.postimg.cc/tgZNrkmn/image.jpg'
        }
    },
    methods: {                              //事件处理方式
        update(){
            var inputted1 = this.input1;
            var inputted2 = this.input2;
            var inputted3 = this.input3;
            this.$axios.post('http://localhost:8080//updateUsername',{user_id:this.$store.state.user_id,newUsername:inputted1});
            this.$axios.post('http://localhost:8080/updateSex',{user_id:this.$store.state.user_id,newSex:inputted2});
            this.$axios.post('http://localhost:8080/updateAvatar',{user_id:this.$store.state.user_id,newAvatar:inputted3});
            alert('修改成功请重新登录');
            /*this.$axios({
                method: 'post',           // 指明请求方式，可以是 get 或 post 
                url: '',       // 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 
                data: qs.stringify({      // 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 
                    username: this.input1,
                    userkey: this.input2,
                    userphoto:this.userphoto
                })
            })
            .then(res => {              // res 是 response 的缩写 
                window.alert("登录成功！");
            })
            .catch(err => {
                console.log(err);         // 若出现异常则在终端输出相关信息 
            })*/

        },
        async getuser(){
            let {data} = await this.$axios.post('http://localhost:8080/selectUser',{user_id:this.$store.state.user_id});
            this.data=data;
            this.username=this.data.username;
            this.userkey=this.data.password;
            this.usersex=this.data.sex;
            this.userphoto=this.data.avatar;
            console.log(this.data);
            console.log(this.$store.state.user_id);
        },
        logout(){
            this.$store.commit('Logout');
        
        },
        goout(){
            this.$router.push('/login');
        }

    },
    created() {                             //渲染前阶段
        this.getuser();                  
    }
    
}
</script>


<style lang="scss" scoped>
*{
  margin:10px;
  padding:10px;
  
}
.userid{
    //border:2px solid rgb(255, 255, 255);
    background:rgba(66, 20, 182, 0.262);
    height:1000px;
    width:1300px;
    margin:auto;
    border-radius: 10px;  /* 边框四个角的弧度  */
    .routitle{
        font-weight: bolder;
        font-size: 20px;
        text-align: right;
        //margin:auto;
    }
    .biaoti{
    font-family: "Times New Roman", cursive, serif, sans-serif;
    width: 250px;
    height: 80px;
    //border: 1px solid rgb(255, 255, 255);
    margin:auto;
    font-size: 60px;
    color:rgba(0, 0, 0, 0.745);
    font-weight: bold;
    }
    .message{
    width:1000px;
    height:35px;
    //background:rgb(255, 255, 255);
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 25px;
    color:rgba(63, 75, 250, 0.725);
    margin:auto;
    }
    .xijie{
    width:900px;
    //height:50px;
    //background:rgb(255, 255, 255);
    font-family: "Times New Roman", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 20px;
    color:rgba(136, 107, 14, 0.656);
    margin:auto;
    }
    .touxiang{
        width:200px;
        height:200px;
    }
}
.el-tabs__item {
	/* 修改为您想要的文字大小 */
    font-size: 20px!important;
}
.fontClass{
    font-size:30px;
    font-family: Microsoft Yahei;
    color:rgba(0, 0, 0, 0.656);
}
input{
    border-radius: 10px;  /* 边框四个角的弧度  */
    width:500px;
    height:30px;
}
.search{
    border-radius: 10px;  /* 边框四个角的弧度  */
    width:1280px;
    height:75px;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 25px;
    margin:auto;
}
</style>
